<template>
  <div class="music">
    <WujieVue
        width="100%"
        height="100%"
        name="music"
        :url="music.url"
        :fetch="fetch"
        :sync="true"
        :props="music.props"
        :beforeLoad="beforeLoad"
        :beforeMount="beforeMount"
        :afterMount="afterMount"
        :beforeUnmount="beforeUnmount"
        :afterUnmount="afterUnmount"
    />
  </div>
</template>

<script>

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'music',
  data() {
    return {
      music: {
        // url: 'http://192.168.1.61:9000/',
        // url: 'http://192.168.60.138:9011/',
        url: '//101.34.102.187:8081/',
        props: {}
      },
    }
  },
  methods: {
    fetch(url, options) {
      return window.fetch(url, { ...options, credentials: "omit" });
    },
    beforeLoad() {
      console.log('beforeLoad！')
    },
    beforeMount() {
      console.log('beforeMount！')
    },
    afterMount() {
      console.log('afterMount！')
    },
    beforeUnmount() {
      console.log('beforeUnmount！')
    },
    afterUnmount() {
      console.log('afterUnmount！')
    },
  }
}
</script>

<style scoped>
.music {
  width: 390px;
  height: 844px;
  margin: 0 auto;
  background-color: #222;
  overflow: hidden;
}
</style>
